<template>

  <!-- 弹出对话框进行修改用户信息 -->
  <el-dialog v-model="dialogTableVisible" title="修改标签信息">
    <el-form :model="user" label-width="120px">
      <el-form-item label="ID">
        <el-input v-model="user.Id" :disabled="isDis.value"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="user.Name"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="user.Describe"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('add')">确认</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 批量操作按钮 -->
  <el-button type="primary" @click="addUser">新增</el-button>

  <el-table
      :data="labelList"
      style="width: 90%"
      @select="select"
  >
    <el-table-column type="selection" width="55"/>
    <el-table-column label="ID" prop="Id"/>
    <el-table-column label="名称" prop="Name"/>
    <el-table-column align="right">
      <template #header>
        <el-input :change="searchUser" v-model="search" size="mini" placeholder="Type to search"/>
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!--  页码显示  -->
  <!-- <page :pageInfo="pageInfo" @handleCurrentChange="handleCurrentChange"/> -->
</template>

<script lang="ts">
import {onBeforeMount, reactive, Ref, ref} from "vue";

import { GET, GETA, POSTA, PUTA } from "@/api";
import {ElMessage, ElMessageBox} from "element-plus";

import Page from "@/components/page/Page.vue"

export default {
  name: "Label",
  components: {
    Page,
  },
  setup() {
    const user = ref<any>({})
    const labelList = ref()
    const isEdit = ref(false)
    const pageInfo = reactive({
      // 当前页
      currentPage: 1,
      // 每页的数量
      pageSize: 10,
      // 总条目数
      total: 10
    })
    const dialogTableVisible = ref(false)
    const roleList: Ref<any> = ref([])
    const selectList = ref([])
    const isDis = ref(true)

    const search = ref("")
    const handleEdit = (index: any, row: any) => {
      dialogTableVisible.value = true
      isDis.value = false
      user.value = row
      roleList.value = user.value.roleList
    }

    const handleDelete = (index: any, row: any) => {
      ElMessageBox.confirm(
          '确定要删除' + row.Username + '用户吗?',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        PUTA(`/Tag/DeleteTag?id=${row.Id}`, {}).then(res => {
          if (res.status === 200) {
            ElMessage.success("删除标签" + row.Id + "成功")
            loadUser()
          }
        }).catch(err => {
          console.log(err)
          ElMessage.error("出错啦")
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消操作',
        })
      })
    }

    const searchUser = () => {
      // TODO 搜索用户
      console.log("更改用户")
    }

    const loadUser = () => {
      GETA(`/Tag/GetTags`, {}).then(res => {
        if (res.status === 200) {
          labelList.value = res.data.data
          console.log(res.data.data)
        //   pageInfo.currentPage = res.data.current
        //   pageInfo.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    }

    const handleCurrentChange = (index: number) => {
      pageInfo.currentPage = index
      loadUser()
    }

    onBeforeMount(() => {
      loadUser()
    })

    const onSubmit = (val:string) => {
      // const roles: { roleId: number; roleName: any; }[] = []
      // // 对用户的性别进行格式化
      // user.value.gender = (user.gender == '男' ? 1 : 0)
      // user.value.age = new Date(user.value.age).toLocaleDateString()
      // // 对用户的角色列表进行格式化
      // roleList.value.forEach((item: any) => {
      //   // TODO 此处不能写死
      //   if (item === "超级管理员") {
      //     roles.push({
      //       roleId: 1,
      //       roleName: item
      //     })
      //   }
      //   if (item === "管理员") {
      //     roles.push({
      //       roleId: 2,
      //       roleName: item
      //     })
      //   }
      //   if (item === "普通用户") {
      //     roles.push({
      //       roleId: 3,
      //       roleName: item
      //     })
      //   }
      // })
      // user.value.roleList = roles
      if (val == "add") {
        POSTA("Tag/AddTag", {
            ...user.value
        }
        , {}).then(res => {
            console.log(res)
            ElMessage.success("增加标签成功")
            dialogTableVisible.value = false
            isDis.value = false
        }).catch(err => {
            console.log(err)
            ElMessage.error("增加标签失败,请重试")
        })
      } else {
        // TODO 用户封装传来数据失败
        PUTA("/Tag/UpdateTag", {
            ...user.value
        }, {}).then(res => {
            ElMessage.success("操作成功")
            dialogTableVisible.value = false
        }).catch(err => {
            ElMessage.error("操作失败")
        })
      }

    }

    const onCancel = () => {
      dialogTableVisible.value = false
    }

    const batchDelete = () => {
      ElMessageBox.confirm(
          '确定要删除吗?',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        const idList: any[] = []
        selectList.value.forEach((item: any) => {
          idList.push(item.userId)
        })

        // PUTA("/user/batchDelete", [...idList]).then(res => {
        //   ElMessage.success("删除用户成功")
        //   loadUser()
        // }).catch(err => {
        //   ElMessage.error("网络异常")
        // })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消操作',
        })
      })
    }
    const select = (selections: any, row: any) => {
      selectList.value = selections
    }

    const addUser = () => {
      dialogTableVisible.value = true
      isDis.value = true
    }

    return {
      roleList,
      labelList,
      user,
      search,
      isEdit,
      handleDelete,
      handleEdit,
      pageInfo,
      handleCurrentChange,
      searchUser,
      dialogTableVisible,
      onSubmit,
      onCancel,
      batchDelete,
      addUser,
      select,
      isDis
    }
  }
}
</script>
